<!DOCTYPE html>
<html lang="en">
<head>
	 <meta charset="UTF-8">
	<meta >
	 <title>Ajax上传文件</title>
    <link href="css/swiper.min.css" rel="stylesheet"/>
    <link href="css/public.css" rel="stylesheet"/>
    <link href="css/main.css" rel="stylesheet"/>
    <link href="css/style.css" rel="stylesheet"/>

	<script src="./js/jquery-1.9.1.js"></script>
    <script src="js/mobile-util.js"></script>
    <script src="js/layer/layer.js"></script>
	<script src="js/public.js"></script>
	<script src="js/laydate.js"></script>
    <script src="../mifiadmin/js/common.js"></script>
	<style type="text/css">
		.userContent{
			margin-top:2.2rem;
		}
		.labels{
			height: 40px;
			line-height: 40px;
			display: block;
		}
		#flexs{
			width: 100%;
		}
/*		.flexs #btnClick{
			display: block;
			width:100px;
			margin:10px auto;
			height: 40px;
			line-height: 40px;
			background: #EB3F47;
			color:#fff;
			-webkit-appearance:none;
			appearance:none;
		}*/
	</style>
</head>
<body>
<header class="mui-bar mui-bar-nav indexheader flex">
    <div class="headerlogo" onclick="goIndex()">
        <i class="iconfont backbtn">&#xe602;</i>
    </div>

    <div class="headertitle">
        <p>Ajax上传文件</p>
    </div>

    <div class="headerright">

    </div>

</header>	
<!-- <div class="userContent">
 	<label class="labels">用户名：<input id="username" type="text"></label>
	<label class="labels">用户图像：<input id="carid_image_z" type="file" onchange="preview(this)"></label>
	<div id="preview"></div>
	<input type="button" id="btnClick" value="上传">
</div> -->
<ul class="realui userContent">
            <li class="flex">
                <div class="realleft">
                    <span class="red">*</span>用户名：
                </div>
                <div class="realright">
                    <input id="username" type="text">
                </div>
            </li>
            <li class="flex">
                <div class="realleft">
                    <span class="red">*</span>用户图像：
                </div>
                <div class="realright">
                    <input id="carid_image_z" type="file" onchange="preview(this)">
                </div>
            </li>
           

        </ul>
            <div class="flexs">
            	<div id="preview"></div>
				<input class="rechargebtn" type="button" id="btnClick" value="上传">
            </div>         
<script>
	$("#btnClick").click(function () {
		var formData = new FormData();
		formData.append("id", 'd0aaf17a-6782-4edb-9ea5-b274d611e1aa');
		formData.append("ts", '20180110');
		formData.append("device_id", '866666030863998');
		formData.append("package_id", '');
		formData.append("sign", 'hash_hmac(\'sha512\', _echo($post_data), \'7bd5de940d924ce7a038d5ae0046dd09383fb04d4b6848cc834adbac0ce15f5a\');');
		console.log(formData);


		$.ajax({
			url: 'http://180.169.48.172:38790/mapi_v1/get_package',
			type: 'post',
			data: formData,
			processData: false,
			contentType: false,
			headers: {
				'Content-type': 'application/x-www-form-urlencoded',
				'sign': 'uid:d0aaf17a-6782-4edb-9ea5-b274d611e1aa'
			},
			success: function (msg) {
				console.log(msg);
			},error: function(){
				console.log("失败了");
			}
		});
	});
	function preview(file) {
		var prevDiv = document.getElementById('preview');
		if (file.files && file.files[0]) {
			var reader = new FileReader();
			reader.onload = function (evt) {
				prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
			}
			reader.readAsDataURL(file.files[0]);
		} else {
			prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
		}
	}
</script>
</body>
</html>
